<template>
  <el-row :gutter="0" class="footer-service">
    <el-col :span="24" class="footer-service-box">
      <ul class="service-list">
        <a
          v-for="row of serviceList"
          :key="row.id"
          :href="row.link"
          target="_blank"
        >
          <li class="service-item">
            <el-icon>
              <component :is="row.icon" />
            </el-icon>
            <span class="service-item-text">{{ row.name }}</span>
          </li>
        </a>
      </ul>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { ElMessage } from "element-plus";
  import httpClient from "../../../utils/http";
  import { ServiceList } from "../../../types/Shop";
  const serviceList: Array<ServiceList> = [
    {
      id: 1,
      name: "预约维修服务",
      icon: "Position",
      link: "https://www.mi.com/service/aftersale/front",
    },
    {
      id: 2,
      name: "7天无理由退货",
      icon: "Back",
      link: "https://www.mi.com/service/exchange#back",
    },
    {
      id: 3,
      name: "15天免费换货",
      icon: "Refresh",
      link: "https://www.mi.com/service/exchange#back",
    },
    {
      id: 4,
      name: "满69包邮",
      icon: "Postcard",
      link: "https://www.mi.com/service/buy/Postal%20policy",
    },
    {
      id: 5,
      name: "520余家售后网点",
      icon: "Location",
      link: "https://www.mi.com/service/sitelist",
    },
  ];

  onMounted(async () => {
    try {
      httpClient.get("shop/service").then((res) => {
        if (res.data.code === 200) {
          serviceList.length = 0;
          serviceList.push(...res.data.data.serviceList);
        }
      });
    } catch (error) {
      ElMessage.error("获取数据失败" + error);
    }
  });
</script>

<style lang="scss" scoped>
  @use "./../../../styles/variable.scss" as *;

  .footer-service {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
    border-bottom: 1px solid rgb(224, 224, 224);
  }

  .footer-service-box {
    min-height: 80px;
    margin: 10px;
    padding: 0px;
    background: $bsWhite;
  }

  .service-list {
    width: 100%;
    height: 80px;
    line-height: 80px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;

    & > a {
      text-decoration: none;
    }
  }

  .service-item {
    width: 200px;
    height: 30px;
    border-left: 1px solid #e0e0e0;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    color: #616161;
  }

  .service-item-text {
    height: 30px;
    text-align: center;
    color: #616161;
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
  }
</style>
